<template>
    <div class="home">
      <!--首页外卖头部-->
      <home-header></home-header>
      <search></search>
      <div class="home-swiper">
        <swiper :options="swiperOption" style="padding-bottom: 20px">
          <swiper-slide v-for="(pages , index) in swiperSlides" :key="index">
            <goods-ul :datas="pages"></goods-ul>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <ul class="home-classification-card">
        <classification-card :classificationCards="item"  v-for="(item, index) in classificationCards" :key="index"></classification-card>
      </ul>
      <preferential-zone></preferential-zone>
    </div>
</template>

<script>
import GoodsUl from '../../common/goods/goodsUl'
import HomeHeader from './common/HomeHeader'
import Search from '../../common/search/Search'
import ClassificationCard from '../../common/cards/classificationCard'
import PreferentialZone from './common/PreferentialZone'
export default {
  name: 'Home',
  components: {PreferentialZone, ClassificationCard, Search, HomeHeader, GoodsUl},
  data () {
    return {
      rows: [
        {img: require('@/assets/logo.png'), text: '超市', bgc: 'pink', goodsDesc: '超市超市'},
        {img: require('@/assets/logo.png'), text: '健身', bgc: 'skyblue', goodsDesc: '超市超市'},
        {img: require('@/assets/logo.png'), text: '娱乐', bgc: 'green', goodsDesc: '超市超市'},
        {img: require('@/assets/logo.png'), text: '超市', bgc: 'red', goodsDesc: '超市超市'},
        {img: require('@/assets/logo.png'), text: '健身', bgc: 'gray', goodsDesc: '超市超市'},
        {img: require('@/assets/logo.png'), text: '娱乐', bgc: 'pink', goodsDesc: '超市超市'},
        {img: require('@/assets/logo.png'), text: '超市', bgc: 'skyblue', goodsDesc: '超市超市'},
        {img: require('@/assets/logo.png'), text: '健身', bgc: 'pink', goodsDesc: '超市超市'},
        {img: require('@/assets/logo.png'), text: '娱乐', bgc: 'skyblue', goodsDesc: '超市超市'},
        {img: require('@/assets/logo.png'), text: '超市', bgc: 'pink', goodsDesc: '超市超市'},
        {img: require('@/assets/logo.png'), text: '健身', bgc: 'skyblue', goodsDesc: '超市超市'},
        {img: require('@/assets/logo.png'), text: '娱乐', bgc: 'pink', goodsDesc: '超市超市'}
      ],
      classificationCards: [
        {text: '酒店', desc: '专享特惠，啦啦啦', cardType: 'globe-europe'},
        {text: '电影票', desc: '专享特惠，啦啦啦', cardType: 'globe-europe'},
        {text: '火车票', desc: '专享特惠，啦啦啦', cardType: 'globe-europe'}
      ],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  },
  computed: {
    swiperSlides () {
      const pages = []
      this.rows.filter((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>

<style scoped lang="less">
.home{
  .home-classification-card{
    display: flex;
  }
}
</style>
